<template>
  <el-form label-position="left" class="search-form">
    <el-container>
      <el-row ref="target" type="flex" class="search-form_row">
        <slot />
        <div class=" btn-box el-form-item el-form-item--small">
          <div class="el-form-item__content ">
            <el-button type="primary" size="small" :loading="loading" icon="el-icon-search" @click="query">查 询</el-button>
            <el-button v-if="$slots.default" type="info" size="small" @click="reset">重 置</el-button>
          </div>
        </div>
      </el-row>
    </el-container>
  </el-form>
</template>

<script>
import { throttle } from '@/utils/index'
export default {
  name: 'SearchForm',
  props: {
    labelWidth: {
      type: String,
      default: '70px'
    },
    loading: {
      type: Boolean,
      default: false
    },
  },
  methods:{
    // 查询
    query: throttle(function () {
      this.$emit('query')
    }, 1500),
    // 重置
    reset: throttle(function () {
      this.$emit('reset')
    }, 1500),
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-form-item {
    margin-right: 30px;
  }
  .el-form-item__content{
    padding: 3px 0;
  }
  // .search-form {
  // border-bottom: 1px solid #DCDFE6;
  // }
  .search-form_row{
    flex-wrap: wrap !important;
  }
</style>

